<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <!-- 引入 ECharts CDN（也可本地引入） -->
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  <title>9宫格图表示例</title>
  <style>
    /* 页面基础样式 */
    body {
      margin: 0;
      padding: 20px;
      background: #f5f5f5;
      font-family: "微软雅黑", sans-serif;
    }
    /* 九宫格容器：用 grid 排版，3 列自动均分 */
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 20px; /* 宫格间距 */
    }
    /* 每个图表容器的样式 */
    .chart-box {
      width: 100%;
      height: 300px; /* 固定高度，可按需调整 */
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <!-- 九宫格容器 -->
  <div class="grid-container">
    <div class="chart-box" id="chart1"></div>
    <div class="chart-box" id="chart2"></div>
    <div class="chart-box" id="chart3"></div>
    <div class="chart-box" id="chart4"></div>
    <div class="chart-box" id="chart5"></div>
    <div class="chart-box" id="chart6"></div>
    <div class="chart-box" id="chart7"></div>
    <div class="chart-box" id="chart8"></div>
    <div class="chart-box" id="chart9"></div>
  </div>

  <script>
    // 初始化单个图表的函数（封装复用）
    function initChart(domId, option) {
      const dom = document.getElementById(domId);
      const myChart = echarts.init(dom);
      myChart.setOption(option);
      // 响应式：窗口变化时重绘
      window.addEventListener('resize', () => myChart.resize());
    }

    // —————— 1. 第一个图表：折线图示例 ——————
    initChart('chart1', {
      title: { text: '折线图示例', left: 'center' },
      xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
      yAxis: { type: 'value' },
      series: [{
        name: '访问量',
        type: 'line',
        data: [120, 200, 150, 80, 250],
        smooth: true // 平滑折线
      }]
    });

    // —————— 2. 第二个图表：柱状图示例 ——————
    initChart('chart2', {
      title: { text: '柱状图示例', left: 'center' },
      xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] },
      yAxis: { type: 'value' },
      series: [{
        name: '销量',
        type: 'bar',
        data: [30, 40, 20, 50, 45],
        itemStyle: { color: '#2f4074' }
      }]
    });

    // —————— 3. 第三个图表：饼图示例 ——————
    initChart('chart3', {
      title: { text: '饼图示例', left: 'center' },
      series: [{
        type: 'pie',
        radius: ['40%', '70%'], // 环形图效果
        data: [
          { value: 30, name: '苹果' },
          { value: 20, name: '香蕉' },
          { value: 50, name: '橙子' }
        ]
      }]
    });

    // —————— 4. 第四个图表：面积图示例 ——————
    initChart('chart4', {
      title: { text: '面积图示例', left: 'center' },
      xAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] },
      yAxis: { type: 'value' },
      series: [{
        name: '收益',
        type: 'line',
        areaStyle: {}, // 显示面积填充
        data: [150, 230, 180, 300]
      }]
    });

    // —————— 5. 第五个图表：散点图示例 ——————
    initChart('chart5', {
      title: { text: '散点图示例', left: 'center' },
      xAxis: { type: 'value', name: 'X轴' },
      yAxis: { type: 'value', name: 'Y轴' },
      series: [{
        type: 'scatter',
        data: [[10, 20], [20, 30], [30, 10], [40, 50]],
        label: { show: true, position: 'top' }
      }]
    });

    // —————— 6. 第六个图表：雷达图示例 ——————
    initChart('chart6', {
      title: { text: '雷达图示例', left: 'center' },
      radar: {
        indicator: [
          { name: '能力A', max: 100 },
          { name: '能力B', max: 100 },
          { name: '能力C', max: 100 },
          { name: '能力D', max: 100 }
        ]
      },
      series: [{
        type: 'radar',
        data: [{ value: [80, 60, 90, 70], name: '评分' }]
      }]
    });

    // —————— 7. 第七个图表：K线图示例（简单模拟） ——————
    initChart('chart7', {
      title: { text: 'K线图示例', left: 'center' },
      xAxis: { type: 'category', data: ['Day1', 'Day2', 'Day3', 'Day4'] },
      yAxis: { type: 'value' },
      series: [{
        type: 'candlestick',
        data: [[20, 25, 18, 24], [22, 28, 20, 26], [24, 30, 22, 28], [26, 24, 23, 25]]
      }]
    });

    // —————— 8. 第八个图表：漏斗图示例 ——————
    initChart('chart8', {
      title: { text: '漏斗图示例', left: 'center' },
      series: [{
        type: 'funnel',
        data: [
          { value: 100, name: '步骤1' },
          { value: 80, name: '步骤2' },
          { value: 60, name: '步骤3' },
          { value: 40, name: '步骤4' }
        ]
      }]
    });

    // —————— 9. 第九个图表：地图示例（中国地图，需确保引入地图数据） ——————
    // 注意：ECharts 5+ 需单独引入地图 JSON 或注册地图，此处演示基础用法
    // 若需更详细地图，可参考 ECharts 官网 “地图” 文档扩展
    initChart('chart9', {
      title: { text: '地图示例', left: 'center' },
      geo: {
        map: 'china',
        label: { show: true },
        roam: true // 允许缩放、拖动
      },
      series: [{
        type: 'map',
        map: 'china',
        data: [
          { name: '北京', value: 100 },
          { name: '上海', value: 200 },
          { name: '广州', value: 150 }
        ]
      }]
    });
  </script>
</body>
</html>